<!-- 矿工注册 -->
<template>

  <div class="page">
    <img src="~assets/images/miner/bg.png" alt="" class="banner">
    <div class="form">
      <form autocomplete="on">
        <div class="form-row">
          <input type="text" placeholder="请设置用户昵称" v-model="nickname" maxlength="20">
        </div>
        <div class="form-row">
          <input type="password" placeholder="请设置账号登录密码" v-model="password" maxlength="20" minlength="6">
        </div>
        <p class="tip">*密码需包含大小写字母和数字长度在6～20个字符</p>
        <button @click.prevent="submit">完成注册</button>
        <a :href="downloadUrl" class="download" download="yyets" @click="downloadTip">
          <cube-tip ref="tip" direction="bottom" :style="{left: '-23vw',top: '-13.667vw' }"><div style="white-space: nowrap">下载人人钱包APP，请长按页面在浏览器打开</div>
          </cube-tip>
          下载人人钱包APP</a>
      </form>
    </div>
  </div>

</template>





<script>
    import {versions, getQueryString} from 'common/js/utl'

  import {
      minerRegister
  } from 'api'
  export default {
    data () {
      return {
          pwdReg: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/,
          status: '',
          source: 1,
          sign: '',
          nodeNickname: '',
          code: null,
          nickname: '',
          phone_area: '86',
          phone_number: '',
          invite_code: '',
          password: ''
      }
    },
    beforeRouteEnter (to, from, next) {
      //let inv = getQueryString('invite')
      next((vm) => {
        Object.assign(vm, to.query)
      })
    },
    created () {
      this.downloadUrl = versions.ios ? 'https://testflight.apple.com/join/HtU1EG7M' : 'http://appdown.rrys.tv/yqb_latest.apk'
    },
    methods: {
      downloadTip () {
        this.$refs.tip.show()
        if (versions.android && versions.wechat) {
          this.$refs.tip.show()
          if (this.isTipShow) {
            return
          }
          this.isTipShow = true
          setTimeout(() => {
            this.$refs.tip.hide()
            this.isTipShow = false
          }, 2000)
        }
      },
      download () {
        try {
          let elemIF = document.createElement('iframe')
          elemIF.src = versions.ios ? 'https://itunes.apple.com/cn/app/%E4%BA%BA%E4%BA%BA%E5%BD%B1%E8%A7%86%E5%AD%97%E5%B9%95%E7%BB%84/id1052761459?mt=8' : 'http://appdown.rrys.tv/yyets_latest.apk'
          elemIF.style.display = 'none'
          document.body.appendChild(elemIF)
        } catch (e) {

        }
      },
      validForm () {
        let errTip
        let {nickname, password, pwdReg} = this
        // if (!this.isAuth) {
        //   this.toastTip('请先获取验证码')
        //   return false
        // }
        if (!nickname) {
          this.toastTip('请填写昵称')
          return false
        }
        if (!password) {
          this.toastTip('请填写密码')
          return false
        }
        let l = password.length
          if (l < 6 || l > 20 || !pwdReg.test(password)) {
              this.toastTip('密码不符合规则')
              return false
          }


        return true
      },
      isEmpty (str) {
        return !str.trim()
      },
      toastTip (info) {
        this.$createToast({
          time: 2500,
          type: 'warn',
          txt: info
        }).show()
      },
        getResultStatus(s){
            switch (s) {
                case 0:
                    return 3
                case 1:
                    return 2
                case 3:
                    return 1
                default:
                    return 3
            }
        },
      async submit () {
        if (this.isSubmiting) {
          return
        }
        let {invite_code, nickname, nodeNickname, phone_number, phone_area, sign, source, password, info} = this
        if (!this.validForm()) {
          return
        }
        try {
            let dt = await  minerRegister({
                nickname,
                sign,
                invitationCode: invite_code,
                area: phone_area,
                phone: phone_number,
                pwd: password,
                source
            })
            let {data, info} = dt
            let {status} = data
            info = encodeURIComponent(info)
            this.$router.push({
                path: '/invitationResult', query: {
                    superNodeName: this.nodeNickname,
                    status:  this.getResultStatus(status),
                    failureText1: info,
                    failureText2: info
                }
            })

        }catch (e) {
            this.toastTip(e.info)
        }
          this.isSubmiting = false

      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  $color: #5A99FF;
  .page {
    height: 100%;
    overflow: auto;
    background: #121D3B;
    color: #fff;
    font-size: 26px;
    padding-bottom: 60px;
  }

  .banner {
    display: block;
    min-height: 680px;
    width: 100%;
  }

  .index-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eaeaea;
    line-height: 3;
    padding: 0 4em 0 1em;
  }

  .form {
    margin: 0 96px;
    padding-top: 20px;
    input {
      color: #9FD1FC;
      font-size: 26px;
      &::placeholder {
        color: #9FD1FC;
      }
    }
  }

  .form-row {
    display: flex;
    margin-bottom: 32px;
    height:80px;
    border:2px solid rgba(159,209,252,1);
    input {
      flex: 1;
      background: transparent;
      text-indent: 22px;
    }
    &.code-input {
      input {
        width: 6em;
      }
    }
  }

  .area_num {
    display: flex;
    width: 102px;
    align-items: center;
    padding-right: 3px;
    span {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &::after {
      content: '';
      display: inline-block;
      border: 9px solid transparent;
      border-top-color: #9fd1fc;
      width: 0;
      height: 0;
      margin-top: 4px;
    }
  }

  .get-code {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 198px;
    font-size: 24px;
    border-left: 2px solid rgba(159,209,252,1);
  }

  button {
    display: block;
    width: 100%;
    height: 80px;
    background: url("~assets/images/miner/btn-bg.png") no-repeat center center;
    background-size: cover;
    @include button(41px);
    color: #121D3B;
    margin-bottom: 32px;
    margin-top: 141px;
  }

  .download {
    height:80px;
    border:2px solid rgba(159,209,252,1);
    border-radius:40px;
    color: #9FD1FC;
    text-align: center;
    display: block;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon::before {
    content: '';
    width: 19px;
    height: 19px;
    display: inline-block;
    background-size: contain;
    background: no-repeat center center;
    margin-right: 8px;
    transform: translateY(5px);
  }


  .valid-code-input {
    input {
      width: 6em;
    }
    img {
      width: 110px;
      height: auto;
      margin-bottom: 5px;
    }
    .click-valid {
      width: 110px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
  }


  .area_code {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    height: 100%;
    width: 100%;
    color: #333;
    &.active {
      display: block;
    }
  }

  .tip {
    width:535px;
    font-size:24px;
    color:rgba(255,255,255,1);
    line-height:24px;
    white-space: nowrap;
  }


</style>
